<template>
    <div class="cityBox">
        <el-cascader style="width: 240px" placeholder="选择城市" v-model="value1" :options="options" filterable
            :props="props" @change="onChange" />
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps, watch, Ref } from 'vue';
import citys from '../../assets/city.txt';
var value1: string = ref('');
var prop = defineProps({
    modelValue: {
        type: String
    }
});
watch(
    () => prop.modelValue,
    (newValue, oldValue) => {
        value1.value = prop.modelValue;
    },
    {
        deep: true,
        immediate: true
    }
);
let options = reactive(citys);
const emit = defineEmits(['update']);
const onChange = (val) => {
    let cityCode = optionsFn(options, val);
    console.log(cityCode, 'cityCode123');

    emit('update', cityCode.label);
};
let props = reactive({
    expandTrigger: 'hover' as const,
    emitPath: false,
    value: 'code',
    label: 'label',
    children: 'children'
});
const optionsFn = (arr, code) => {
    let newItem = ref();
    arr.forEach((item) => {
        if (item.children.length >= 1) {
            for (const key in item.children) {
                if (item.children[key].code == code) {
                    newItem = item.children[key];
                }
            }
        }
    });
    return newItem;
};
</script>
<style scoped>
span {
    margin-right: 8px;
}
</style>
